<template>
    <div id="demo">
        <!-- 遮罩层 -->
        <div class="father" v-show="panel">
            <div class="container">
                <div id="cropper" style="margin-top:1%;margin-left: 1%;margin-right: 1%;height: 85%;margin-bottom: 1%">
                    <img id="image" :src="url" alt="Picture">
                </div>
                <div>
                    <div style="float: right;margin-right: 1%;margin-top:3%;">
                        <button icon="el-icon-zoom-out" @click="zoom(-1)" size="mini" circle>缩小</button>
                        <button icon="el-icon-zoom-in" @click="zoom(1)" size="mini" circle>放大</button>
                        <button icon="el-icon-refresh" @click="rotate" size="mini" circle>旋转</button>
                        <button type="success" icon="el-icon-check" @click="crop" size="mini" circle>保存</button>
                        <button type="danger" icon="el-icon-close" @click="panel=false" size="mini" circle>关闭</button>
                    </div>
                </div>
            </div>
        </div>
        <div style="padding:2.67vw;">
            <div style="margin-top:2.67vw;position:relative;">
                <input type="file" id="change" @click="upload" accept="image/*" @change="change"
                       style="display:block;color:#fff;position:absolute;top:0;left:50%;transform:translateX(-50%);width:100px;height:100px;z-index:99;opacity: 0;">
                <div class="show" v-on:mouseover="addClassload" v-on:mouseout="removeClassload" @click="upload"
                     :style="'backgroundImage:url('+imgurl+');margin:0 auto;border: 0px dashed '+color">
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import {
    uploadImg
} from '@/api/index'
import Cropper from 'cropperjs'
import Exif from 'exif-js'

export default {
    props: {
        imgurl: {
            type: String,
            default: 'https://cdn.92jiangbei.com/newjiangbei/img/newImg/five/icon-xiangji.png'
        }
    },
    components: {},
    data() {
        return {
            headerImage: 'https://cdn.92jiangbei.com/newjiangbei/img/newImg/five/icon-xiangji.png',
            picValue: '',
            cropper: '',
            croppable: false,
            panel: false,
            url: '',
            color: "#d9d9d9",
            current: 0,
            file: ''

        }
    },
    mounted() {
        //初始化这个裁剪框
        var self = this;
        var image = document.getElementById('image');
        this.cropper = new Cropper(image, {
            aspectRatio: 1,
            viewMode: 1,
            zoomOnWheel: false, //是否允许通过鼠标滚轮来缩放图片
            background: true, //是否在容器上显示网格背景
            rotatable: true, //是否允许旋转图片
            ready: function () {
                self.croppable = true;
            }
        });
    },
    methods: {
        addClassload() {
            this.color = "#1b95e0"
        },
        removeClassload() {
            this.color = "#d9d9d9"
        },
        //点击按钮自动执行选择文件事件
        upload() {
            this.url = '',
                this.current = 0;
            document.getElementById("change").value = null;
            // document.getElementById("change").click();
        },
        //旋转
        rotate() {
            //alert(this.cropper.image)
            this.current = (this.current + 90) % 360;
            this.cropper.rotate(this.current);
        },
        //缩放
        zoom(num) {
            num = num || 1;
            this.cropper.zoom(num);
        },

        getObjectURL(file) {
            let self = this;
            let Orientation;
            //去获取拍照时的信息，解决拍出来的照片旋转问题
            Exif.getData(file, function () {
                Orientation = Exif.getTag(this, 'Orientation');
            });
            // 创建一个reader
            let reader = new FileReader();
            // 将图片2将转成 base64 格式
            reader.readAsDataURL(file);
            // 读取成功后的回调
            reader.onloadend = function () {
                let result = this.result;
                let img = new Image();
                img.src = result;
                //判断图片是否大于100K,是就直接上传，反之压缩图片
                if (this.result.length <= (100 * 1024)) {
                    self.headerImage = this.result;
                    self.postImg();
                } else {
                    img.onload = function () {
                        let data = self.compress(img, Orientation);
                        console.log(data)
                        self.headerImage = data;
                        self.postImg();
                    }
                }
            }

            var url = null;
            if (window.createObjectURL != undefined) { // basic
                url = window.createObjectURL(file);
            } else if (window.URL != undefined) { // mozilla(firefox)
                url = window.URL.createObjectURL(file);
            } else if (window.webkitURL != undefined) { // webkit or chrome
                url = window.webkitURL.createObjectURL(file);
            }
            return url;
        },
        change(e) {
            let files = e.target.files || e.dataTransfer.files;
            this.file = files;
            if (!files.length) return;
            this.panel = true;
            this.picValue = files[0];
            this.url = this.getObjectURL(this.picValue);
            //每次替换图片要重新得到新的url
            if (this.cropper) {
                this.cropper.replace(this.url);
            }
            this.panel = true;

        },

        imgPreview(file) {
            let self = this;
            let Orientation;
            //去获取拍照时的信息，解决拍出来的照片旋转问题
            Exif.getData(file, function () {
                Orientation = Exif.getTag(this, 'Orientation');
            });
            // 看支持不支持FileReader
            if (!file || !window.FileReader) return;
            if (/^image/.test(file.type)) {
                // 创建一个reader
                let reader = new FileReader();
                // 将图片2将转成 base64 格式
                reader.readAsDataURL(file);
                // 读取成功后的回调
                reader.onloadend = function () {
                    let result = this.result;
                    let img = new Image();
                    img.src = result;
                    //判断图片是否大于100K,是就直接上传，反之压缩图片
                    if (this.result.length <= (100 * 1024)) {
                        self.headerImage = this.result;
                        self.postImg();
                    } else {
                        img.onload = function () {
                            let data = self.compress(img, Orientation);
                            console.log(data)
                            self.headerImage = data;
                            self.postImg();
                        }
                    }
                }
            }
        },
        rotateImg (img, direction,canvas) {
            //最小与最大旋转方向，图片旋转4次后回到原方向
            const min_step = 0;
            const max_step = 3;
            if (img == null)return;
            //img的高度和宽度不能在img元素隐藏后获取，否则会出错
            let height = img.height;
            let width = img.width;
            let step = 2;
            if (step == null) {
                step = min_step;
            }
            if (direction == 'right') {
                step++;
                //旋转到原位置，即超过最大值
                step > max_step && (step = min_step);
            } else {
                step--;
                step < min_step && (step = max_step);
            }
            //旋转角度以弧度值为参数
            let degree = step * 90 * Math.PI / 180;
            let ctx = canvas.getContext('2d');
            switch (step) {
                case 0:
                    canvas.width = width;
                    canvas.height = height;
                    ctx.drawImage(img, 0, 0);
                    break;
                case 1:
                    canvas.width = height;
                    canvas.height = width;
                    ctx.rotate(degree);
                    ctx.drawImage(img, 0, -height);
                    break;
                case 2:
                    canvas.width = width;
                    canvas.height = height;
                    ctx.rotate(degree);
                    ctx.drawImage(img, -width, -height);
                    break;
                case 3:
                    canvas.width = height;
                    canvas.height = width;
                    ctx.rotate(degree);
                    ctx.drawImage(img, -width, 0);
                    break;
            }
        },
        compress(img, Orientation) {
            let canvas = document.createElement("canvas");
            let ctx = canvas.getContext('2d');
            //canvas
            let tCanvas = document.createElement("canvas");
            let tctx = tCanvas.getContext("2d");
            let initSize = img.src.length;
            let width = img.width;
            let height = img.height;
            //如果图片大于四百万像素，计算压缩比并将大小压至400万以下
            let ratio;
            if ((ratio = width * height / 4000000) > 1) {
                console.log("大于400万像素")
                ratio = Math.sqrt(ratio);
                width /= ratio;
                height /= ratio;
            } else {
                ratio = 1;
            }
            canvas.width = width;
            canvas.height = height;
            //        铺底色
            ctx.fillStyle = "#fff";
            ctx.fillRect(0, 0, canvas.width, canvas.height);
            //如果图片像素大于100万则使用瓦片绘制

            let count;
            if ((count = width * height / 1000000) > 1) {
                console.log("超过100W像素");
                count = ~~(Math.sqrt(count) + 1); //计算要分成多少块瓦片
                //            计算每块瓦片的宽和高
                let nw = ~~(width / count);
                let nh = ~~(height / count);
                tCanvas.width = nw;
                tCanvas.height = nh;
                for (let i = 0; i < count; i++) {
                    for (let j = 0; j < count; j++) {
                        tctx.drawImage(img, i * nw * ratio, j * nh * ratio, nw * ratio, nh * ratio, 0, 0, nw, nh);
                        ctx.drawImage(tCanvas, i * nw, j * nh, nw, nh);
                    }
                }
            } else {
                ctx.drawImage(img, 0, 0, width, height);
            }
            // 修复ios上传图片的时候 被旋转的问题
            if (Orientation != "" && Orientation != 1) {
                switch (Orientation) {
                    case 6://需要顺时针（向左）90度旋转
                        this.rotateImg(img, 'left', canvas);
                        break;
                    case 8://需要逆时针（向右）90度旋转
                        this.rotateImg(img, 'right', canvas);
                        break;
                    case 3://需要180度旋转
                        this.rotateImg(img, 'right', canvas);//转两次
                        this.rotateImg(img, 'right', canvas);
                        break;
                }
            }

            //进行最小压缩
            let ndata = canvas.toDataURL('image/jpeg', 0.1);
            console.log('压缩前：' + initSize);
            console.log('压缩后：' + ndata.length);
            console.log('压缩率：' + ~~(100 * (initSize - ndata.length) / initSize) + "%");
            tCanvas.width = tCanvas.height = canvas.width = canvas.height = 0;
            return ndata;
        },

        crop() {
            this.panel = false;
            var croppedCanvas;
            var roundedCanvas;

            if (!this.croppable) {
                return;
            }
            // Crop
            croppedCanvas = this.cropper.getCroppedCanvas();
            // console.log(this.cropper)
            // Round
            /*截取圆形
            roundedCanvas = this.getRoundedCanvas(croppedCanvas);
            this.headerImage = roundedCanvas.toDataURL();
            */
            //方形
            this.headerImage = croppedCanvas.toDataURL();

            var gettype = Object.prototype.toString

            this.postImg()
        },
        dataURLtoFile(dataurl, filename = 'file') {
            let arr = dataurl.split(',')
            let mime = arr[0].match(/:(.*?);/)[1]
            let suffix = mime.split('/')[1]
            let bstr = atob(arr[1])
            let n = bstr.length
            let u8arr = new Uint8Array(n)
            while (n--) {
                u8arr[n] = bstr.charCodeAt(n)
            }
            return new File([u8arr], `${filename}.${suffix}`, {
                type: mime
            })
        },
        /* // 截取圆形
         getRoundedCanvas (sourceCanvas) {
           var canvas = document.createElement('canvas');
           var context = canvas.getContext('2d');
           var width = sourceCanvas.width;
           var height = sourceCanvas.height;
           canvas.width = width;
           canvas.height = height;
           context.imageSmoothingEnabled = true;
           context.drawImage(sourceCanvas, 0, 0, width, height);
           context.globalCompositeOperation = 'destination-in';
           context.beginPath();
           context.arc(width / 2, height / 2, Math.min(width, height) / 2, 0, 2 * Math.PI, true);
           context.fill();
           return canvas;
         },*/
        postImg() {
            //这边写图片的上传
            var formData = new FormData();
            // formData.append("file",this.dataURLtoFile(this.headerImage));
            console.log(this.headerImage, 222)
            console.log(this.file[0])
            formData.append("img", this.file[0]);
            let para = {
                "base64": this.headerImage,
                "fileType": this.file[0].type,
            }
            uploadImg(para).then(res => {
                if (res.data.code == "000") {
                    this.$emit("uploadImgEdit", res.data.content[0])
                } else {
                    this.$vux.toast.text('上传失败', 'middle');
                }

            }).catch(error => {
                this.$vux.toast.text('上传失败', 'middle');
            });

        }
    }
}
</script>

<style>
* {
    margin: 0;
    padding: 0;
}

button {
    border: 0 none;
    background: none;
    font-size: 16px;
    margin-left: 20px;
}

.father {
    background-color: rgba(0, 0, 0, 0.5);
    position: fixed;
    left: 0px;
    top: 0px;
    width: 100%;
    height: 100%;
    z-index: 999;
}

.i {
    font-size: 28px;
    color: #8c939d;
    width: 100px;
    height: 100px;
    line-height: 100px;
    text-align: center;
}

#demo .show {
    border: 1px dashed #d9d9d9;
    border-radius: 50%;
    width: 100px;
    height: 100px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    display: block;
    text-align: center;
    outline: none;
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
}

#demo .container {
    z-index: 99;
    height: 106vw;
    width: 92%;

    position: fixed;
    /*padding-top: 60px;*/
    left: 50%;
    top: 10%;
    transform: translateX(-50%);
    background-color: white;
}

#demo #image {
    max-width: 100%;

}

/* .cropper-view-box,.cropper-face {
    border-radius: 100%; 圆形截图设置
  }*/
/*!
   * Cropper.js v1.0.0-rc
   * https://github.com/fengyuanchen/cropperjs
   *
   * Copyright (c) 2017 Fengyuan Chen
   * Released under the MIT license
   *
   * Date: 2017-03-25T12:02:21.062Z
   */
.cropper-container {
    font-size: 0;
    line-height: 0;
    position: relative;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    direction: ltr;
    -ms-touch-action: none;
    touch-action: none
}

.cropper-container img {
    /* Avoid margin top issue (Occur only when margin-top <= -height) */
    display: block;
    min-width: 0 !important;
    max-width: none !important;
    min-height: 0 !important;
    max-height: none !important;
    width: 100%;
    height: 100%;
    image-orientation: 0deg
}

.cropper-wrap-box,
.cropper-canvas,
.cropper-drag-box,
.cropper-crop-box,
.cropper-modal {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
}

.cropper-wrap-box {
    overflow: hidden;
}

.cropper-drag-box {
    opacity: 0;
    background-color: #fff;
}

.cropper-modal {
    opacity: .5;
    background-color: #000;
}

.cropper-view-box {
    display: block;
    overflow: hidden;
    width: 100%;
    height: 100%;
    outline: 1px solid #39f;
    outline-color: rgba(51, 153, 255, 0.75);
}

.cropper-dashed {
    position: absolute;
    display: block;
    opacity: .5;
    border: 0 dashed #eee
}

.cropper-dashed.dashed-h {
    top: 33.33333%;
    left: 0;
    width: 100%;
    height: 33.33333%;
    border-top-width: 1px;
    border-bottom-width: 1px
}

.cropper-dashed.dashed-v {
    top: 0;
    left: 33.33333%;
    width: 33.33333%;
    height: 100%;
    border-right-width: 1px;
    border-left-width: 1px
}

.cropper-center {
    position: absolute;
    top: 50%;
    left: 50%;
    display: block;
    width: 0;
    height: 0;
    opacity: .75
}

.cropper-center:before,
.cropper-center:after {
    position: absolute;
    display: block;
    content: ' ';
    background-color: #eee
}

.cropper-center:before {
    top: 0;
    left: -0.4vw;
    width: 0.93vw;
    height: 1px
}

.cropper-center:after {
    top: -0.4vw;
    left: 0;
    width: 1px;
    height: 0.93vw
}

.cropper-face,
.cropper-line,
.cropper-point {
    position: absolute;
    display: block;
    width: 100%;
    height: 100%;
    opacity: .1;
}

.cropper-face {
    top: 0;
    left: 0;
    background-color: #fff;
}

.cropper-line {
    background-color: #39f
}

.cropper-line.line-e {
    top: 0;
    right: -0.4vw;
    width: 0.67vw;
    cursor: e-resize
}

.cropper-line.line-n {
    top: -0.4vw;
    left: 0;
    height: 0.67vw;
    cursor: n-resize
}

.cropper-line.line-w {
    top: 0;
    left: -0.4vw;
    width: 0.67vw;
    cursor: w-resize
}

.cropper-line.line-s {
    bottom: -0.4vw;
    left: 0;
    height: 0.67vw;
    cursor: s-resize
}

.cropper-point {
    width: 0.67vw;
    height: 0.67vw;

    opacity: .75;
    background-color: #39f
}

.cropper-point.point-e {
    top: 50%;
    right: -0.4vw;
    margin-top: -0.4vw;
    cursor: e-resize
}

.cropper-point.point-n {
    top: -0.4vw;
    left: 50%;
    margin-left: -0.4vw;
    cursor: n-resize
}

.cropper-point.point-w {
    top: 50%;
    left: -0.4vw;
    margin-top: -0.4vw;
    cursor: w-resize
}

.cropper-point.point-s {
    bottom: -0.4vw;
    left: 50%;
    margin-left: -0.4vw;
    cursor: s-resize
}

.cropper-point.point-ne {
    top: -0.4vw;
    right: -0.4vw;
    cursor: ne-resize
}

.cropper-point.point-nw {
    top: -0.4vw;
    left: -0.4vw;
    cursor: nw-resize
}

.cropper-point.point-sw {
    bottom: -0.4vw;
    left: -0.4vw;
    cursor: sw-resize
}

.cropper-point.point-se {
    right: -0.4vw;
    bottom: -0.4vw;
    width: 2.67vw;
    height: 2.67vw;
    cursor: se-resize;
    opacity: 1
}

@media (min-width: 768px) {
    .cropper-point.point-se {
        width: 10.67vw;
        height: 10.67vw
    }
}

@media (min-width: 992px) {
    .cropper-point.point-se {
        width: 1.33vw;
        height: 1.33vw
    }
}

@media (min-width: 1200px) {
    .cropper-point.point-se {
        width: 0.67vw;
        height: 0.67 v w;
        opacity: .75
    }
}

.cropper-point.point-se:before {
    position: absolute;
    right: -50%;
    bottom: -50%;
    display: block;
    width: 200%;
    height: 200%;
    content: ' ';
    opacity: 0;
    background-color: #39f
}

.cropper-invisible {
    opacity: 0;
}

.cropper-bg {
    background-image: url('');
}

.cropper-hide {
    position: absolute;
    display: block;
    width: 0;
    height: 0;
}

.cropper-hidden {
    display: none !important;
}

.cropper-move {
    cursor: move;
}

.cropper-crop {
    cursor: crosshair;
}

.cropper-disabled .cropper-drag-box,
.cropper-disabled .cropper-face,
.cropper-disabled .cropper-line,
.cropper-disabled .cropper-point {
    cursor: not-allowed;
}
</style>
